<template>
  <div class="org">
    <el-button type="primary" @click="addDialog.show =true">新增机构</el-button>
    <div class="search-row">
      <el-input placeholder="机构编码或者名称" v-model="codeOrName"></el-input>
      <el-button type="success" @click="search">搜索</el-button>
      <el-checkbox v-model="showNoName" label="只显示无名称机构" border @change="search"></el-checkbox>
    </div>
    <el-table :data="orgList" border style="width: 100%" stripe>
      <el-table-column prop="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="code" label="机构代码" width="180"></el-table-column>
      <el-table-column prop="name" label="名称" width="230"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handleEditTable(scope.$index, scope.row)"
          >编辑名称</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDeleteTable(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalPage"
      :page-size="pageSize"
      :current-page="pageNum"
      @current-change="pageNumChange"
      @prev-click="pageNumChange"
      @next-click="pageNumChange"
    ></el-pagination>
    <el-dialog
      class="edit-dialog"
      title="修改机构名称"
      :visible.sync="editDialog.show"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="org-code">
        机构代码：
        <el-input placeholder="请输入内容" v-model="editDialog.orgCode" :disabled="true"></el-input>
      </div>
      <div class="org-name">
        机构名称：
        <el-input placeholder="请输入内容" v-model="editDialog.orgName"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="editOrgName">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      class="add-dialog"
      title="新增机构"
      :visible.sync="addDialog.show"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="org-code">
        机构代码：
        <el-input placeholder="请输入内容" v-model="addDialog.orgCode" maxlength="6" show-word-limit></el-input>
      </div>
      <div class="org-name">
        机构名称：
        <el-input placeholder="请输入内容" v-model="addDialog.orgName"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="addOrg">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { Button, Input, Checkbox, Table, TableColumn, Pagination, Dialog } from 'element-ui';
import { getBankFinancingOrgList, updateFinancingOrgName, deleteFinancingOrg, addFinancingOrg } from '@/api/bank-financing-org.js';
export default {
  name: 'bank-financing-org',
  components: {
    [Button.name]: Button,
    [Input.name]: Input,
    [Checkbox.name]: Checkbox,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Pagination.name]: Pagination,
    [Dialog.name]: Dialog
  },
  data () {
    return {
      showNoName: false,
      codeOrName: null,
      pageNum: 1,
      pageSize: 10,
      totalPage: 0,
      orgList: [],
      editDialog: {
        show: false,
        orgCode: null,
        orgName: null
      },
      addDialog: {
        show: false,
        orgCode: null,
        orgName: null
      }

    }
  },
  mounted () {
    this.refreshList();
  },
  methods: {
    refreshList () {
      getBankFinancingOrgList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        showNoName: this.showNoName,
        codeOrName: this.codeOrName
      }).then(res => {
        this.orgList = res.list;
        this.totalPage = res.total;
        this.orgList.forEach((item, index) => {
          item.index = index + 1;
        });
      }).catch(errMsg => {
        this.$alert(errMsg.msg);
      })
    },
    pageNumChange (pageNum) {
      this.pageNum = pageNum;
      this.refreshList();
    },
    search () {
      this.refreshList();
    },
    editOrgName () {
      updateFinancingOrgName({
        orgCode: this.editDialog.orgCode,
        orgName: this.editDialog.orgName
      }).then(res => {
        this.editDialog.show = false;
        this.refreshList();
      }).catch(errMsg => {
        this.$alert(errMsg.msg);
      })
    },
    addOrg () {
      addFinancingOrg({
        orgCode: this.addDialog.orgCode,
        orgName: this.addDialog.orgName
      }).then(res => {
        this.addDialog.show = false;
        this.refreshList();
      }).catch((errMsg) => {
        this.$alert(errMsg.msg);
      })
    },
    handleEditTable (index, row) {
      this.editDialog.orgCode = row.code;
      this.editDialog.orgName = row.name;
      this.editDialog.show = true;
    },
    handleDeleteTable (index, row) {
      this.$confirm('确定删除该机构', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row.id);
        deleteFinancingOrg(row.id).then((res) => {
          this.refreshList();
        }).catch(errMsg => {
          this.$alert(errMsg.msg);
        })
      }).catch(() => {

      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.org {
  padding-left: 20px;
  padding-top: 20px;

  .search-row {
    margin-top: 5px;
    margin-bottom: 10px;

    .el-input {
      width: 250px;
    }

    .el-checkbox {
      margin-left: 20px;
    }
  }

  .edit-dialog {
    .org-code {
      .el-input {
        width: 250px;
      }

      margin-bottom: 12px;
    }

    .org-name {
      .el-input {
        width: 250px;
      }
    }
  }

  .add-dialog {
    .org-code {
      .el-input {
        width: 250px;
      }

      margin-bottom: 12px;
    }

    .org-name {
      .el-input {
        width: 250px;
      }
    }
  }
}
</style>